<template>
  <div class="card-wrapper">
    <div
      class="card-value"
      :style="{ color: descData.color }"
    >
      {{ descData.value }}
    </div>
    <div class="card-desc">
      {{ descData.name }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'Card',
  props: {
    descData: { type: Object, required: true }
  },
  data () {
    return {

    }
  }
}
</script>
<style lang="less" scoped>
.card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  .card-value {
    font-size: 24px;
    font-weight: bolder;
  }
  .card-desc {
    font-size: 16px;
  }
}
</style>
